import { View, Text, Image, Swiper, SwiperItem } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import "./index.scss";
import Taro from "@tarojs/taro";
import Ggcz from "../../images/index/ggcz.png";
import Hyhd from "../../images/index/hyhd.png";
import Sjgz from "../../images/index/sjgz.png";
import Xcaj from "../../images/index/xcaj.png";
import CardScroll from "../../components/index/card_scroll";
import CardScrollItem from "../../components/index/card_scroll_item";
import DefaultHead from "../../images/index/default_head.png";
import Logo from "../../images/common/logo.png";
import LoginPrompt from "../../components/common/login_prompt";
import { useState, useEffect } from "react";
import {
  getBanner,
  getHouseInfoPage,
  getDesignerCase,
  getArticles,
} from "../../services/api";
import Tag from "../../components/common/tag";

export default function Index() {
  const [swiperData, setSwiperData] = useState([]);
  const [houseInfos, setHouseInfos] = useState([]);
  const [designerCases, setDesignerCases] = useState([]);
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    getBanner(1).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setSwiperData([...result]);
      }
    });
    getHouseInfoPage(1, 5).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setHouseInfos(result.items);
      }
    });
    getDesignerCase(1, 5).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setDesignerCases(result.items);
      }
    });
    getArticles(1, 5).then((res) => {
      const { result, type } = res;
      if (type == "success") {
        setArticles(result.items);
      }
    });
  }, []);
  const toBannerDetail = () => {
    Taro.navigateTo();
  };

  const renderTags = (item) => {
    const tagStr = item.tag
    if (tagStr){
      const tags = tagStr.split("，")
      return <View className="tags">{tags.map(tag=><Tag text={tag} />)}</View>
    }
    return <View className="tags" ><Tag text={"默认标签"} /></View>
}

  return (
    <View className="index">
      <View className="head">
        <Swiper className="head-swiper">
          {swiperData.map((item) => {
            return (
              <SwiperItem>
                <Image className="head-img" src={item.img_url} />
                <Text className="head-more">点击查看</Text>
              </SwiperItem>
            );

          })}
        </Swiper>
        <View className="nav">
          <View className="nav-bar">
            <Image className="nav-bar-icon" src={Ggcz} />
          </View>
          <View className="nav-bar">
            <Image className="nav-bar-icon" src={Hyhd} />
          </View>
          <View className="nav-bar">
            <Image className="nav-bar-icon" src={Sjgz} />
          </View>
          <View className="nav-bar">
            <Image className="nav-bar-icon" src={Xcaj} />
          </View>
        </View>
      </View>
      <View className="content">
        <CardScroll title={"乡村安家农房推荐"} right={"更多 >"}>
          {houseInfos.map((item) => (
            <CardScrollItem
              title={item.title}
              url={item.imgUrl}
              other={<Text className="item-other">￥{item.price}元/年</Text>}
            />
          ))}
        </CardScroll>
        <CardScroll title={"爆款设计推荐"} right={"更多 >"}>
          {designerCases.map((item) => (
            <CardScrollItem title={item.name} />
          ))}
        </CardScroll>
        <CardScroll title={"网红打卡热门推荐"} right={"更多 >"}>
          {articles.map((item) => (
            <CardScrollItem title={item.title} url={item.imgurl} other={renderTags(item)} />
          ))}
        </CardScroll>
      </View>
      <LoginPrompt />
    </View>
  );
}
